<template>
    <div>
        <div class="container">
            <el-button @click="reset()">重置</el-button>
            <!-- 项目设备录入 -->
            <el-divider content-position="left">变电站录入</el-divider>
            <el-button @click="drawDevice(101, 32)">110kV变电站</el-button>
            <el-divider content-position="left">中压线路录入</el-divider>
            <el-button @click="drawDevice(201)">架空线路</el-button>
            <el-button @click="drawDevice(202)">电力电缆</el-button>
            <el-divider content-position="left">开关设备录入</el-divider>
            <el-button @click="drawDevice(301)">开关站</el-button>
            <el-button @click="drawDevice(302)">环网柜</el-button>
            <el-button @click="drawDevice(303)">电缆分支箱</el-button>
            <el-button @click="drawDevice(401)">柱上断路器</el-button>
            <el-button @click="drawDevice(402)">柱上负荷开关</el-button>
            <el-divider content-position="left">电缆廊道录入</el-divider>
            <el-button @click="drawDevice(601)">电缆廊道</el-button>
            <el-divider content-position="left">柱上变压器录入</el-divider>
            <el-button @click="drawDevice(701)">柱上变压器</el-button>
            <!-- 项目设备编辑 -->
            <el-divider content-position="left">设备编辑</el-divider>
            <el-button @click="editDevice">开启编辑</el-button>
        </div>
        <bdz :show.sync="showBdz" :getMap="getMap" :type="type" :params="params" @refresh="reset"></bdz>
        <xl :show.sync="showXl" :getMap="getMap" :type="type" :params="params" @refresh="reset"></xl>
        <zfsb :show.sync="showZfsb" :getMap="getMap" :type="type" :params="params" @refresh="reset"></zfsb>
        <zskg :show.sync="showZskg" :getMap="getMap" :type="type" :params="params" @refresh="reset"></zskg>
        <dlld :show.sync="showDlld" :getMap="getMap" :type="type" :params="params" @refresh="reset"></dlld>
    </div>
</template>

<script>
import mixins from '../mixins';
import Bdz from './deviceDetail/Bdz';
import Xl from './deviceDetail/Xl';
import Zfsb from './deviceDetail/Zfsb';
import Zskg from './deviceDetail/Zskg';
import Dlld from './deviceDetail/Dlld';
let DEVICE_INFO_ARRAY = [
  [101, 'Bdz', '变电站', 30000000, 'Bdz'],
  [201, 'Jkxl', '架空线路', 10100000, 'Xl'],
  [202, 'Dldl', '电力电缆', 20100000, 'Xl'],
  [301, 'Kgz', '开关站', 30000004, 'Zfsb'],
  [302, 'Hwg', '环网柜', 32400000, 'Zfsb'],
  [303, 'Dlfzx', '电缆分支箱', 20400000, 'Zfsb'],
  [401, 'Zsdlq', '断路器', 11100000, 'Zskg'],
  [402, 'Zsfhkg', '负荷开关', 11200000, 'Zskg'],
  [601, 'Dlld', '电缆廊道', 91000000, 'Dlld'],
  [701, 'Zsbyq', '柱上变压器', 91000000, 'Zskg']
];
const DEVICE_INFO = DEVICE_INFO_ARRAY.map((item) => {
  return {
    code: item[0],
    func: item[1],
    name: item[2],
    sbzlx: item[3],
    sbType: item[4]
  };
});
export default {
  name: 'PowerGridTool',
  components: { Bdz, Xl, Zfsb, Zskg, Dlld },
  props: {
    getMap: {
      type: Function,
      required: true
    },
    getTool: {
      type: Function,
      required: true
    },
    mapLoadSuccess: Boolean
  },
  mixins: [mixins],
  data() {
    return {
      powerGridTool: null,
      showXl: false,
      showBdz: false,
      showZfsb: false,
      showZskg: false,
      showDlld: false,
      type: 'add',
      params: {},
      defaultOptions: {
        schema: 'fzgh_202003',
        dydj: 32,
        ghnf: 2022,
        ghrw: 127,
        ghfa: 392,
        ghxm: 386,
        ssqy: 41569,
        ssdw: 'ff80808149f52e24014a039871840007',
        province: '_js',
        city: '12',
        jkxh: 'JKLYJ/10-220',
        dlxh: 'YJV2226/10-3*300',
        isml: 0,
        mxs: 1,
        jxs: 2,
        cxs: 4,
        sfsxpdzdh: 1,
        pdzdhsxfs: 1,
        kgzt: 1,
        tdlx: 1,
        dlgks: 9,
        dlgzj: 200,
        txgks: 2,
        txgzj: 100,
        verRule: '0,-2,100',
        versionid: 2737791819622707
      }
    };
  },
  watch: {
    mapLoadSuccess(success) {
      if (success) {
        this.loadGrid();
        this.addGridChange();
      }
    }
  },
  methods: {
    addGridChange() {
      this.getTool('ActualGridTool').events.datachange = (featureCollection) => {
        console.log('featureCollection', featureCollection, this);
        if(this.powerGridTool) {
          this.powerGridTool.setSnapFeatures(featureCollection);
        }
      };
    },
    loadGrid() {
    //   let option = Object.assign({}, this.option, { fxlx: 2 });
      this.getTool('ActualGridTool').setSearchOption({
        fxlx: '2',
        ghbb: '10e06eedb0fc4b90a7c5d61c6056c398',
        ghnf: '',
        jzt: '',
        schema: 'fzgh_202204',
        projectType: 2,
        ssdw: '',
        ssghrw: 65,
        ssqy: '',
        ssxm: '',
        verRule: '0,100',
        xmzt: '',
        zhfa: '',
        zhfazt: '',
        ztfa: null
      });
      this.getTool('ActualGridTool').show(true);

    },
    reset() {
      //   this.powerGridTool && this.powerGridTool.stop();
      //   this.powerGridTool = null;
      //   this.getTool("SimpleGridTool").refresh();
    },
    drawDevice(index, dydj) {
      this.reset();
      this.type = 'add';
      let drawFunctionName =
                'draw' + DEVICE_INFO.find((item) => item.code === index).func;
      let drawOption = Object.assign({ dydj: dydj }, this.defaultOptions);
      if (drawFunctionName) {
        this.powerGridTool =
                    this.getTool('PowerGridTool')[drawFunctionName](drawOption, null, [10100000]);
        console.log(this.getTool('ActualGridTool').getRenderedFeatures());
        this.powerGridTool.setSnapFeatures(this.getTool('ActualGridTool').getRenderedFeatures());
        this.powerGridTool.events.onDrawEnd = (result) => {
          console.log(
            '_powerGridTool.onDrawEnd',
            this.powerGridTool,
            result
          );
          let sbType = DEVICE_INFO.find(
            (item) => item.code === index
          ).sbType;
          this.params = {
            data: result.data,
            defaultOptions: this.defaultOptions
          };
          this['show' + sbType] = true;
        };
        this.powerGridTool.events.onVerificationCallback = (
          ruleResult
        ) => {
          if (!ruleResult.success) {
            this.$message.warning(ruleResult.message);
          }
        };
      } else {
        console.log('未实现：', index);
      }
    },
    editDevice() {
      this.reset();
      this.getTool('SimpleGridTool').events.click = (e) => {
        if (e.length > 0) {
          this.getTool('SimpleGridTool').events.click = null;
          this.editShape(e[0]);
        }
      };
      this.getTool('SimpleGridTool').events.dblclick = (e) => {
        if (e.length > 0) {
          this.editProperties(e[0]);
        }
      };
    },
    editShape(feature) {
      console.log(feature);
      this.type = 'edit';
      let editFunctionName =
                'edit' +
                DEVICE_INFO.find(
                  (item) => item.sbzlx === feature.properties.sbzlx
                ).func;
      let geometry = feature.geometry;
      console.log(geometry);
      if (geometry.type !== 'Point') {
        geometry = JSON.parse(feature.properties.geometry);
        geometry.coordinates =
                    this.$MapUtils.CoordinateUtil.projectWebMercatorToLngLat(
                      geometry.coordinates
                    );
      }
      let editOption = Object.assign({}, feature.properties, {
        geometry: geometry,
        ghrw: this.defaultOptions.ghrw,
        ghxm: this.defaultOptions.ghxm,
        ghnf: this.defaultOptions.ghnf,
        schema: this.defaultOptions.schema,
        ssqy: this.defaultOptions.ssqy,
        city: this.defaultOptions.city
      });
      if (editFunctionName) {
        this.powerGridTool =
                    this.getTool('PowerGridTool')[editFunctionName](editOption);
        this.powerGridTool.events.onDrawEnd = (result) => {
          console.log(
            '_powerGridTool.onDrawEnd',
            this.powerGridTool,
            result
          );
          let sbType = DEVICE_INFO.find(
            (item) => item.sbzlx === feature.properties.sbzlx
          ).sbType;
          this.params = {
            data: result.data,
            defaultOptions: this.defaultOptions
          };
          this['show' + sbType] = true;
        };
        this.powerGridTool.events.onVerificationCallback = (
          ruleResult
        ) => {
          if (!ruleResult.success) {
            this.$message.warning(ruleResult.message);
          }
        };
      } else {
        console.log('未实现：', feature.properties.sbzlx);
      }
    },
    editProperties(feature) {
      this.type = 'edit';
      let sbType = DEVICE_INFO.find(
        (item) => item.sbzlx === feature.properties.sbzlx
      ).sbType;
      this['show' + sbType] = true;
    },
    getSbmc(code) {
      let device = DEVICE_INFO.find((item) => item.code === code);
      return '新建' + device.name + new Date().toLocaleString();
    },
    getSbType(code) {
      return DEVICE_INFO.find((item) => item.code === code).sbType;
    }
  }
};
</script>

<style scoped>
.container >>> .el-form-item__content {
    width: 200px;
}
.el-divider >>> .el-divider__text {
    background: #9b9bd2;
}
.el-button {
    width: 50%;
}
.el-button + .el-button {
    margin-left: 0px;
}
</style>
